import React from 'react';
import {connect} from 'dva'
import {Row, Col, Button, Modal} from 'antd'
import {Page} from 'components'
import queryString from 'query-string'
import Filter from './Filter'
import List from './List'
import Editss from './Edit'
import Detail from './Detail';

const ColProps = {
  xs: 24,
  sm: 12,
  style: {
    marginBottom: 16
  }
}

const TwoColProps = {
  ...ColProps,
  xl: 96
}

const ReportConfigs = ({location, dispatch, reportConfig, loading}) => {
  location.query = queryString.parse(location.search)

  const {
    items,
    currentItem,
    pagination,
    selectedRowKeys,
    selectedRows,
    modalVisible,
    modalDetailVisible,
    modalType,
    isMotion
  } = reportConfig;

  const {pageSize} = pagination;

  /**
     * 为报表查询参数增加index，方便之后定位每一个参数
     * @param {*} queryParamJson
     */
  const queryParamJsonIndex = (queryParamJson) => {
    var index = 1;
    for (var ParamJson of queryParamJson) {
      ParamJson.index = index;
      index++;
    }
  };

  const modalProps = {
    dispatch,
    item: currentItem,
    visible: modalVisible,
    maskClosable: false,
    confirmLoading: loading.effects['reportConfig/update'],
    title: `${modalType === 'create'
      ? '创建报表配置'
      : '更新报表配置'}`,
    wrapClassName: 'vertical-center-modal',
    width: 1000,
    okText: '确定',
    cancelText: '取消',
    onAddParam(item) {
      const indexId = item.queryParamJson.length + 1;
      item
        .queryParamJson
        .push({'name': '', 'displayName': '', 'type': '', 'setup': '', key: indexId});
      queryParamJsonIndex(currentItem.queryParamJson);
      dispatch({
        type: 'reportConfig/addParam',
        payload: {
          currentItem: item
        }
      });
    },
    onDeleteParam(record) {
      _.remove(currentItem.queryParamJson, (n) => {
        return n.index === record.index;
      });
      queryParamJsonIndex(currentItem.queryParamJson);
      dispatch({
        type: 'reportConfig/deleteParam',
        payload: {
          currentItem: currentItem
        }
      })
    },
    onOk(data) {
      if (typeof data.queryParamJson != 'string') {
        data.queryParamJson = JSON.stringify(data.queryParamJson);
      }
      dispatch({type: `reportConfig/${modalType}`, payload: data})
    },
    onCancel() {
      dispatch({type: 'reportConfig/hideModal'})
    },
    onParamsChange(value, record, column) {
      if (column === "setup") {
        // 先清空之前的选择项
        record.isRequired = false;
        record.isLike = false;
        record.isDayEndTime = false;
        // 遍历选中的项目，并将对应的参数置为true
        for (var item of value) {
          record[item] = true;
        }
      } else {
        record[column] = value;
      }
      currentItem
        .queryParamJson
        .filter(item => item.index == record.index)
        .map(item => {
          item = record;
        })
      dispatch({
        type: 'reportConfig/changeParams',
        payload: {
          currentItem: currentItem
        }
      })
    }
  }


  const listProps = {
    dataSource: items,
    loading: loading.effects['reportConfig/query'],
    pagination,
    location,
    isMotion,
    onExport(item) {
      let queryParamJson = item.queryParamJson;
      if (!queryParamJson || queryParamJson === null || queryParamJson == "" || queryParamJson == "[]") {
        dispatch({
          type: 'report/doExport',
          payload: {
            currentItem: item
          }
        })
      } else {
        dispatch({
          type: 'report/showModalConditions',
          payload: {
            currentItem: item
          }
        });
      }
    },
    onSelectRows(selectedRowKeys, selectedRows) {},
    getProvinces() {
      console.log("进来了嘛？");
      var provinces = [
        {
          "name": "北京市",
          "id": "110000"
        }, {
          "name": "天津市",
          "id": "120000"
        }, {
          "name": "河北省",
          "id": "130000"
        }
      ]
      return provinces;
    },
    getCitiesByProvince(provinceId) {
      console.log(provinceId);
      var city = [
        {
          "province": "北京市",
          "name": "市辖区",
          "id": "110100"
        }
      ]
      return city;
    },
    getAreaByCity(cityId) {
      console.log(cityId);
      var area = [
        {
          "city": "市辖区",
          "name": "东城区",
          "id": "110101"
        }, {
          "city": "市辖区",
          "name": "西城区",
          "id": "110102"
        }, {
          "city": "市辖区",
          "name": "朝阳区",
          "id": "110105"
        }, {
          "city": "市辖区",
          "name": "丰台区",
          "id": "110106"
        }, {
          "city": "市辖区",
          "name": "石景山区",
          "id": "110107"
        }, {
          "city": "市辖区",
          "name": "海淀区",
          "id": "110108"
        }, {
          "city": "市辖区",
          "name": "门头沟区",
          "id": "110109"
        }, {
          "city": "市辖区",
          "name": "房山区",
          "id": "110111"
        }, {
          "city": "市辖区",
          "name": "通州区",
          "id": "110112"
        }, {
          "city": "市辖区",
          "name": "顺义区",
          "id": "110113"
        }, {
          "city": "市辖区",
          "name": "昌平区",
          "id": "110114"
        }, {
          "city": "市辖区",
          "name": "大兴区",
          "id": "110115"
        }, {
          "city": "市辖区",
          "name": "怀柔区",
          "id": "110116"
        }, {
          "city": "市辖区",
          "name": "平谷区",
          "id": "110117"
        }, {
          "city": "市辖区",
          "name": "密云区",
          "id": "110118"
        }, {
          "city": "市辖区",
          "name": "延庆区",
          "id": "110119"
        }
      ]
      return area;
    },
    onSelectArea(value, selectedOptions) {},
    onChange(page) {
      const {query, pathname} = location
      dispatch({
        type: 'reportConfig/query',
        payload: {
          pageSize: page.pageSize,
          current: page.current
        }
      })
    },
    onShowDetail(item) {
      dispatch({
        type: 'reportConfig/showDetail',
        payload: {
          currentItem: item
        }
      });
    },
    onShowEdit(item) {
      dispatch({
        type: 'reportConfig/detail',
        payload: {
          modalType: 'update',
          currentItem: item
        }
      })
    },
    onShowDelete(item) {
      Modal.confirm({
        title: '删除',
        content: `确认删除【${item.reportName}】？`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          dispatch({
            type: 'reportConfig/delete',
            payload: {
              currentItem: item
            }
          });
        }
      });
    }
  }

  const filterProps = {
    filterItems: [
      {
        id: 'reportName',
        type: 'text',
        placeholder: '请输入报表名称'
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'reportConfig/query',
        payload: {
          ...value
        }
      })
    }
  }

  const detailProps = {
    item: currentItem,
    visible: modalDetailVisible,
    maskClosable: true,
    destroyOnClose: true,
    title: `${currentItem.reportName}`,
    wrapClassName: 'vertical-center-modal',
    width: 1000,
    cancelText: '取消',
    footer: null,
    onCancel() {
      dispatch({type: 'reportConfig/hideModal'});
    }
  }

  const actions = {
    onAdd() {
      dispatch({
        type: 'reportConfig/showModal',
        payload: {
          modalType: 'create',
          currentItem: {
            queryParamJson: []
          }
        }
      })
    }
  }
  return (
    <Page inner>
      <Row gutter={24}>
        <Col {...ColProps}>
          <Button type="primary" className="margin-right" onClick={actions.onAdd}>添加报表配置</Button>
        </Col>
      </Row>
      {/* <Filter {...filterProps}/> */}
      <List {...listProps}/>{modalVisible && <Editss {...modalProps}/>} {modalDetailVisible && <Detail {...detailProps}/>}
    </Page>
  )
};

export default connect(({reportConfig, loading}) => ({reportConfig, loading}))(ReportConfigs)
